import React,{PureComponent} from 'react';
import { connect } from "react-redux";
import {Link} from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';
import * as actionCreators from "./store/actionCreators";
import {actionCreators as loginActionCreators} from "../../pages/login/store";
import {HeaderWrapper,Logo,Nav,NavItem,NavSearch,Addtion,Button,SearchWrapper,SearchInfo,SearchInfoTitle,SearchInfoSwitch,SearchInfoList,SearchInfoItem} from './style'

class Header extends PureComponent {

    getListArea(){
        const {focused,list,page,totalPage,mouseIn,handleMouseEnter,handleMouseLeave,handleChangePage} = this.props;
        const newList = list.toJS();
        const pageList = [];
        if(newList.length>0){
            for(let i =(page-1)*10; i<page*10; i++){
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }     

        if(focused || mouseIn){
            return(
                <SearchInfo 
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch onClick={()=>{handleChangePage(page,totalPage)}}>换一批</SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>       
            )
        }else{
            return null
        }
    }
    
    
    render(){
        const {focused,list,handleInputFocus,handleInputBlur,login,logout} = this.props;
        return (
            <HeaderWrapper>
                <Link to='/'>
                    <Logo></Logo>
                </Link>               
                <Nav>
                    <NavItem className="left active">
                    <span className="iconfont">&#xe602;</span>
                        首页
                    </NavItem>
                    <NavItem className='left'>下载APP</NavItem>
                    <NavItem className='left'>IT技术</NavItem>
                    <NavItem className='right'>
                         <span className="iconfont">&#xe636;</span>
                    </NavItem>
                    {
                        login?
                        <NavItem className='right' onClick={logout}>退出</NavItem>:
                        <Link to='/login'>
                            <NavItem className='right'>登录</NavItem>
                        </Link>                   
                    }
                    <SearchWrapper>
                        <CSSTransition 
                            in={focused}
                            timeout={200}
                            classNames='slide'
                        >
                            <NavSearch
                                className={focused ? 'focused':''}
                                onFocus={()=>{handleInputFocus(list)}}
                                onBlur={handleInputBlur}
                            ></NavSearch>
                        </CSSTransition>  
                        {this.getListArea(focused)}                      
                    </SearchWrapper>
                </Nav>
                <Addtion>    
                    <Link to='/write'>
                        <Button className='writting'>写文章</Button>
                    </Link>                                    
                    <Button className='reg'>注册</Button>
                </Addtion>
            </HeaderWrapper>
        )
    }

    
}

const mapStateToProps =(state)=>{
    return {
        focused:state.get('header').get('focused'),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        totalPage:state.getIn(['header','totalPage']),
        mouseIn:state.getIn(['header','mouseIn']),
        login:state.getIn(['login','login'])
    }
}

const mapDispatchToProps = (dispatch)=>{
    return {
        handleInputFocus(list){
            if(list.size===0){
                dispatch(actionCreators.getList())
            }            
           dispatch(actionCreators.searchFocus())
        },
        handleInputBlur(){
            dispatch(actionCreators.searchBlur())
        },
        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave(){
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page,totalPage){
            if(page<totalPage){
                dispatch(actionCreators.changePage(page+1))
            }else{
                dispatch(actionCreators.changePage(1))
            }
        },
        logout(){
            dispatch(loginActionCreators.logout())
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);